<template>
  <div id="dept">
    <!-- 头部标题 -->
    <div class="header">
      <span>首页 >> 权限管理</span>
    </div>
    <!-- 添加角色以及表格 -->
    <div class="deptInner">
      <!-- 查询权限 -->
      <div class="addEmp">
        <div class="name">
          <span>角色:</span>
          <el-select v-model="select.roleName" placeholder="请选择">
            <el-option
              v-for="item in Roles"
              :key="item.roleId"
              :label="item.roleName"
              :value="item.roleName"
            >
            </el-option>
          </el-select>
        </div>
        <div class="dept">
          <span>权限名称:</span>
          <el-select v-model="select.Premission" placeholder="请选择">
            <el-option
              v-for="item in Pres"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </div>
        <el-button @click="queryPre" type="primary">查询</el-button>
      </div>
      <!-- 添加角色 -->
      <div class="addDept" @click="addPreFormVisible = true">
        <i class="el-icon-circle-plus-outline"></i>
        <span>添加角色</span>
      </div>
      <!-- 表格 -->
      <div class="table">
        <template>
          <el-table :data="tableData" height="700" border style="width: 100%">
            <el-table-column prop="role.roleId" label="角色ID" width="100">
            </el-table-column>
            <el-table-column prop="role.roleName" label="角色名称" width="150">
            </el-table-column>
            <el-table-column
              prop="premission.premissionId"
              label="菜单ID"
              width="150"
            >
            </el-table-column>
            <el-table-column
              prop="premission.premissionNo"
              label="菜单名称"
              width="150"
            >
            </el-table-column>
            <el-table-column label="操作列表" width="200">
              <template slot-scope="scope">
                <div class="tableBtn">
                  <!-- 删除按钮 -->
                  <el-popconfirm
                    title="确定删除此角色吗？"
                    @confirm="deletePre(scope.$index)"
                  >
                    <el-button
                      slot="reference"
                      type="danger"
                      icon="el-icon-delete"
                      circle
                    ></el-button>
                  </el-popconfirm>
                  <!-- 修改按钮 -->
                  <el-button
                    @click="editRoleBtn(scope.$index)"
                    type="primary"
                    icon="el-icon-edit"
                    circle
                  ></el-button>
                  <!-- 查看详情按钮 -->
                  <el-button icon="el-icon-search" circle></el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <el-pagination
        :current-page.sync="assignGroupSearch.pageNo"
        :page-size="assignGroupSearch.rows"
        :page-sizes="[10, 20, 50, 100]"
        layout="sizes, total, prev, pager, next"
        :total="assignGroupSearch.total"
        @size-change="(e) => tableSizeChange(e)"
        @current-change="(e) => tableCurrentChange(e)"
      >
      </el-pagination>
      <!-- 添加权限弹窗 -->
      <div class="addForm">
        <el-dialog
          title="添加权限"
          width="650px"
          :visible.sync="addPreFormVisible"
        >
          <!-- 部门编号 -->
          <div class="deptId">
            <span>角色名称:</span>
            <el-select v-model="AddData.premissionRoleId" placeholder="请选择">
              <el-option
                v-for="item in Roles"
                :key="item.roleId"
                :label="item.roleName"
                :value="item.roleId"
              >
              </el-option>
            </el-select>
          </div>
          <!-- 权限名称 -->
          <div class="deptId">
            <span>权限名称:</span>
            <el-select v-model="AddData.premissionNo" placeholder="请选择">
              <el-option
                v-for="item in Pres"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
          <!-- 底部按钮 -->
          <div slot="footer" class="dialog-footer">
            <el-button @click="addPreFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="newRole">确 定</el-button>
          </div>
        </el-dialog>
      </div>
      <!-- 修改权限信息弹窗 -->
      <div class="addForm">
        <el-dialog
          title="编辑权限信息"
          width="650px"
          :visible.sync="editRoleFormVisible"
        >
          <!-- 角色名称 -->
          <div class="deptId">
            <span>角色名称</span>
            <el-select v-model="editData.premissionRoleId" placeholder="请选择">
              <el-option
                v-for="item in Roles"
                :key="item.roleId"
                :label="item.roleName"
                :value="item.roleId"
              >
              </el-option>
            </el-select>
          </div>
          <!-- 部门编号 -->
          <div class="deptName">
            <span>权限名称</span>
            <el-select v-model="editData.premissionNo" placeholder="请选择">
              <el-option
                v-for="item in Pres"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
          <!-- 底部按钮 -->
          <div slot="footer" class="dialog-footer">
            <el-button @click="editRoleFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="edit">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { getRoles } from "@/api/SystemAPI/roleAPI";
import {
  getPre,
  SelectPre,
  addPre,
  removePre,
  editPre,
} from "@/api/SystemAPI/preAPI";
export default {
  name: "daptManage",
  data() {
    return {
      // 表格数据
      tableData: [
        {
          role: {
            roleId: "",
            roleName: "",
          },
          premission: {
            premissionId: "",
            premissionNo: "",
          },
        },
      ],
      // 添加角色临时数据
      AddData: {
        premissionRoleId: "",
        premissionNo: "",
      },
      // 编辑角色信息
      editData: {
        premissionRoleId: "",
        premissionNo: "",
      },
      // 添加角色弹窗是否显示
      addPreFormVisible: false,
      // 修改部门信息弹窗
      editRoleFormVisible: false,
      // 所有角色信息
      Roles: [
        {
          premissionRoleId: "",
          premissionNo: "",
        },
      ],
      // 所有菜单信息
      Pres: ["员工管理", "请假管理", "报销管理", "部门管理", "密码重置"],
      // 查询信息
      select: {
        roleName: "",
        Premission: "",
      },
      detailList: [],
      assignGroupSearch: {
        pageNo: 1, // 页数
        rows: 10, // 每页展示条数
        total: 0, // 总数
      },
    };
  },
  methods: {
    // 获取权限信息
    getAllPremission: function () {
      getPre().then((res) => {
        if (res.code === 200) {
          this.detailList = res.data;
          this.assignGroupSearch.total = res.data.length;
        }
      });
    },
    // 删除权限
    deletePre: function (index) {
      removePre(this.tableData[index].premission.premissionId).then((res) => {
        if (res.code === 200) {
          this.tableData.splice(index, 1);
          this.$message({
            message: "删除成功",
            type: "success",
          });
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    // 添加权限
    newRole: function () {
      addPre(this.AddData).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.getAllPremission();
          this.addPreFormVisible = false;
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    // 点击修改按钮
    editRoleBtn: function (index) {
      this.editData = JSON.parse(
        JSON.stringify(this.tableData[index].premission)
      );
      this.editRoleFormVisible = true;
    },
    edit: function () {
      editPre(this.editData).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.editRoleFormVisible = false;
          this.getAllPremission();
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    // 获取所有角色信息
    InitRoles: function () {
      getRoles().then((res) => {
        if (res.code === 200) {
          this.Roles = res.data;
        }
      });
    },
    // 模糊查询权限信息
    queryPre: function () {
      SelectPre(this.select.roleName, this.select.Premission).then((res) => {
        if (res.code === 200) {
          this.tableData = res.data;
        }
      });
    },
    // 跳页
    tableCurrentChange(e) {
      this.assignGroupSearch.pageNo = e;
      this.getAllPremission();
      setTimeout(() => {
        this.tableData = this.detailList.slice((e - 1) * 10, e * 10);
      }, 500);
    },
    // 每页展示条数变更
    tableSizeChange(e) {
      this.assignGroupSearch.rows = e;
      this.assignGroupSearch.pageNo = 1;
      this.getAllPremission();
      setTimeout(() => {
        this.tableData = this.detailList.slice(0, 10);
      }, 500);
    },
  },
  mounted() {
    this.getAllPremission();
    setTimeout(() => {
      this.tableData = this.detailList.slice(0, 10);
    }, 500);
    this.InitRoles();
  },
};
</script>

<style lang="less" scoped>
#dept {
  .header {
    background-color: deepskyblue;
    display: flex;
    height: 30px;
    align-items: center;
  }
  // 内容
  .deptInner {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 50px;
    .addDept {
      width: 90px;
      cursor: pointer;
      display: flex;
      flex-direction: row;
      align-items: center;
      i {
        font-size: 20px;
        margin-right: 2px;
      }
    }
    .table {
      margin-top: 20px;
      ::v-deep .el-table th {
        background-color: bisque;
      }
      ::v-deep .el-table__cell {
        border: 3px double gray;
      }
      ::v-deep .el-table__cell.gutter {
        background-color: white;
        border: none;
      }
      .tableBtn {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
      }
    }
    .addEmp {
      margin-bottom: 10px;
      display: flex;
      flex-direction: row;
      justify-content: start;
      .name,
      .dept {
        margin-right: 20px;
        display: flex;
        flex-direction: row;
        align-content: center;
        align-items: center;
      }

      .el-input {
        width: 200px;
      }
    }
    .addForm {
      display: flex;
      flex-direction: column;
      .el-input {
        width: 496px;
      }
      .deptId,
      .deptPrin,
      .deptName {
        margin-bottom: 20px;
        display: flex;
        flex-direction: row;
        align-items: center;
        .el-input,
        .el-select {
          margin-left: 30px;
        }
      }
      .deptId {
        .el-input {
          margin-left: 43px;
        }
      }
    }
  }
}
</style>